<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { Options } from "./index.vue";

interface Props {
  options: Options[];
}

interface Emits {
  (event: "on-select", target: Options): void;
}
// <script setup lang="ts">
// import { ref } from "vue";
// import { Options } from "./index.vue";

// interface Props {
//   options: Options[];
// }

// withDefaults(defineProps<Props>(), {
//   options: () => <Options[]>[],
// });
const emits = defineEmits<Emits>();

// 当前选中字母
const currentLetter = ref<string | undefined | null>("");
// 首先定义 props，然后使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
  options: () => <Options[]>[],
  zimu: "",
});

onMounted(() => {
  watch(
    () => props.zimu,
    (newOptions: any) => {
      // console.log("newOptions", newOptions);
      if (newOptions) {
        // console.log("准备变更字母");
        currentLetter.value = newOptions;
      }
    },
    { immediate: true }
  );
});
/**
 * 字母选中事件.
 * @param {Options} value
 */
function handleLetterClick(value: Options) {
  currentLetter.value = value.name;
  emits("on-select", value);
}
</script>

<template>
  <div
    class="flex flex-col px-2 font-semibold text-gray-400 border-0 border-r border-solid mxq border-slate-100"
  >
    <template v-for="item in options" :key="item.name">
      <span
        class="px-1.5 text-center rounded-full cursor-pointer pxlx"
        :class="{
          'bg-sky-100': item.name === currentLetter,
          'text-primary': item.name === currentLetter,
        }"
        @click="() => handleLetterClick(item)"
        >{{ item.name }}</span
      >
    </template>
  </div>
</template>

<style lang="scss" scoped>
.mxq {
  -webkit-row-gap: 0.25rem; /* 4px */
  -moz-row-gap: 0.25rem; /* 4px */
  grid-row-gap: 0.14rem; /* 4px */
  // row-gap: 0.3rem; /* 4px */
}
.pxlx {
  padding-top: 0.4rem;
  padding-bottom: 0.25rem;
}

.Letter {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: hidden;
}
</style>
